<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>萌系贪吃蛇</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            touch-action: manipulation;
        }

        body {
            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
            background: linear-gradient(135deg, #ffcce6, #ccf2ff);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            color: #6a5acd;
            overflow-x: hidden;
        }

        .game-container {
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.85);
            border-radius: 20px 20px 0 0;
            border: 3px solid #ff9ed8;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 2;
        }

        .score-box, .time-box {
            background: linear-gradient(145deg, #ffb6c1, #ff69b4);
            padding: 8px 15px;
            border-radius: 15px;
            color: white;
            font-weight: bold;
            font-size: 1rem;
            text-align: center;
            min-width: 90px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border: 2px solid #ff1493;
        }

        .score-box i, .time-box i {
            margin-right: 5px;
        }

        #game-board {
            background: rgba(255, 255, 255, 0.9);
            border: 3px solid #ff9ed8;
            border-top: none;
            border-radius: 0 0 20px 20px;
            display: block;
            margin: 0 auto;
            width: 100%;
            height: 65vh;
            max-height: 700px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 10px;
            width: 100%;
            padding-bottom: 10px;
        }

        .direction-controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 8px;
            width: 160px;
            height: 160px;
            margin-bottom: 15px;
        }

        .control-btn {
            background: linear-gradient(145deg, #a5d8ff, #4dabf7);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.3rem;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
        }

        .control-btn:active {
            transform: scale(0.92);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .up-btn {
            grid-column: 2;
            grid-row: 1;
        }

        .down-btn {
            grid-column: 2;
            grid-row: 3;
        }

        .left-btn {
            grid-column: 1;
            grid-row: 2;
        }

        .right-btn {
            grid-column: 3;
            grid-row: 2;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            width: 100%;
            max-width: 500px;
            justify-content: center;
        }

        .action-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 15px;
            font-size: 1rem;
            font-weight: bold;
            color: white;
            cursor: pointer;
            transition: all 0.2s;
            max-width: 180px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        #start-btn {
            background: linear-gradient(145deg, #69db7c, #2b8a3e);
        }

        #reset-btn {
            background: linear-gradient(145deg, #ff8787, #e03131);
        }

        .action-btn:active {
            transform: scale(0.95);
        }

        #game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.95);
            padding: 25px;
            border-radius: 20px;
            text-align: center;
            display: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 3px solid #ff9ed8;
            z-index: 10;
            width: 85%;
            max-width: 320px;
        }

        #game-over h2 {
            color: #ff6b6b;
            margin-bottom: 10px;
            font-size: 1.5rem;
        }

        #final-score, #final-time {
            margin: 8px 0;
            font-size: 1.1rem;
            color: #5c7cfa;
        }

        .game-title {
            text-align: center;
            margin-bottom: 12px;
            color: #ff6b8b;
            font-size: 2rem;
            text-shadow: 2px 2px 0 #ffe0e9;
            letter-spacing: 1px;
            padding: 0 10px;
        }

        .instructions {
            background: rgba(255, 255, 255, 0.85);
            border-radius: 15px;
            padding: 12px;
            margin: 15px 0;
            width: 100%;
            max-width: 500px;
            border: 2px dashed #ff9ed8;
            text-align: center;
            color: #6a5acd;
            font-size: 0.85rem;
        }

        .instructions p {
            margin: 4px 0;
        }

        #welcome-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 20;
            border-radius: 0 0 20px 20px;
            padding: 15px;
        }

        #welcome-screen h2 {
            color: #ff6b8b;
            margin-bottom: 15px;
            font-size: 1.8rem;
            text-align: center;
        }

        #welcome-screen p {
            margin-bottom: 10px;
            text-align: center;
            max-width: 90%;
            font-size: 0.95rem;
        }

        .welcome-btn {
            margin-top: 15px;
            padding: 12px 25px;
            background: linear-gradient(145deg, #ff9ed8, #ff6b8b);
            border: none;
            border-radius: 30px;
            color: white;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .welcome-btn:active {
            transform: scale(0.95);
        }
        
        .speed-control {
            display: flex;
            align-items: center;
            margin: 10px 0;
            gap: 8px;
            width: 100%;
            max-width: 300px;
        }
        
        .speed-label {
            font-weight: bold;
            color: #6a5acd;
            font-size: 0.95rem;
        }
        
        .speed-slider {
            flex: 1;
        }
        
        .game-content {
            width: 100%;
            max-width: 500px;
        }

        @media (max-height: 700px) {
            #game-board {
                height: 50vh;
            }
            
            .game-title {
                font-size: 1.8rem;
                margin-bottom: 8px;
            }
            
            .instructions {
                margin: 10px 0;
                padding: 10px;
            }
        }
        
        @media (max-height: 600px) {
            #game-board {
                height: 45vh;
            }
            
            .direction-controls {
                width: 140px;
                height: 140px;
            }
            
            .control-btn {
                width: 45px;
                height: 45px;
                font-size: 1.2rem;
            }
            
            .action-btn {
                padding: 10px;
                font-size: 0.95rem;
            }
        }
        
        @media (max-width: 500px) {
            .game-header {
                padding: 10px 12px;
            }
            
            .score-box, .time-box {
                padding: 6px 12px;
                font-size: 0.9rem;
                min-width: 80px;
            }
            
            .game-title {
                font-size: 1.8rem;
            }
            
            .direction-controls {
                width: 150px;
                height: 150px;
                gap: 6px;
            }
            
            .control-btn {
                width: 45px;
                height: 45px;
                font-size: 1.2rem;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
            
            .action-btn {
                max-width: 160px;
                min-width: 140px;
                margin: 4px;
            }
            
            #welcome-screen h2 {
                font-size: 1.6rem;
            }
            
            .welcome-btn {
                padding: 10px 20px;
                font-size: 1rem;
            }
        }
        
        @media (max-width: 380px) {
            .game-title {
                font-size: 1.6rem;
            }
            
            .action-btn {
                max-width: 140px;
                min-width: 120px;
                font-size: 0.9rem;
            }
            
            .control-btn {
                width: 42px;
                height: 42px;
            }
        }
    </style>
</head>
<body>
    <div class="game-content">
        <h1 class="game-title">🐍 萌系贪吃蛇 🍓</h1>
        
        <div class="game-container">
            <div class="game-header">
                <div class="score-box">
                    <i class="fas fa-star"></i>
                    <span id="score">0</span>
                </div>
                <div class="time-box">
                    <i class="fas fa-clock"></i>
                    <span id="time">00:00</span>
                </div>
            </div>
            
            <canvas id="game-board"></canvas>
            
            <div id="welcome-screen">
                <h2>欢迎来到萌系贪吃蛇!</h2>
                <p>帮助可爱的小蛇吃到美味的草莓🍓</p>
                <p>使用方向键或方向按钮控制小蛇移动</p>
                <p>每吃到一个草莓获得10分</p>
                <p>撞到墙壁或自己游戏结束</p>
                
                <div class="speed-control">
                    <span class="speed-label">速度:</span>
                    <input type="range" min="100" max="300" value="200" class="speed-slider" id="speed-slider">
                    <span id="speed-value">中等</span>
                </div>
                
                <button id="play-btn" class="welcome-btn">开始游戏</button>
            </div>
            
            <div id="game-over">
                <h2>游戏结束!</h2>
                <p id="final-score">最终分数: 0</p>
                <p id="final-time">游戏时间: 00:00</p>
                <button id="restart-btn" class="action-btn" style="margin-top: 15px; background: linear-gradient(145deg, #74c0fc, #1971c2);">再玩一次</button>
            </div>
        </div>
        
        <div class="controls">
            <div class="direction-controls">
                <button class="control-btn up-btn"><i class="fas fa-arrow-up"></i></button>
                <button class="control-btn down-btn"><i class="fas fa-arrow-down"></i></button>
                <button class="control-btn left-btn"><i class="fas fa-arrow-left"></i></button>
                <button class="control-btn right-btn"><i class="fas fa-arrow-right"></i></button>
            </div>
            
            <div class="action-buttons">
                <button id="start-btn" class="action-btn">开始游戏</button>
                <button id="reset-btn" class="action-btn">重新开始</button>
            </div>
        </div>
        
        <div class="instructions">
            <p><i class="fas fa-info-circle"></i> 使用方向键或方向按钮控制小蛇移动</p>
            <p><i class="fas fa-lightbulb"></i> 吃到食物增加10分，碰到墙壁或自己游戏结束</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('game-board');
            const ctx = canvas.getContext('2d');
            const scoreDisplay = document.getElementById('score');
            const timeDisplay = document.getElementById('time');
            const startBtn = document.getElementById('start-btn');
            const resetBtn = document.getElementById('reset-btn');
            const restartBtn = document.getElementById('restart-btn');
            const playBtn = document.getElementById('play-btn');
            const gameOverScreen = document.getElementById('game-over');
            const welcomeScreen = document.getElementById('welcome-screen');
            const finalScore = document.getElementById('final-score');
            const finalTime = document.getElementById('final-time');
            const speedSlider = document.getElementById('speed-slider');
            const speedValue = document.getElementById('speed-value');
            
            // 设置Canvas尺寸
            function resizeCanvas() {
                const container = canvas.parentElement;
                canvas.width = container.clientWidth;
                canvas.height = Math.min(window.innerHeight * 0.6, 700);
            }
            
            // 游戏变量
            const gridSize = 20;
            let snake = [];
            let food = {};
            let direction = 'right';
            let nextDirection = 'right';
            let score = 0;
            let gameRunning = false;
            let gameInterval;
            let startTime;
            let elapsedTime = 0;
            
            // 初始游戏速度 (200ms - 中等速度)
            let gameSpeed = 200;
            
            // 更新速度显示
            function updateSpeedDisplay() {
                if (gameSpeed <= 150) {
                    speedValue.textContent = "快速";
                } else if (gameSpeed <= 200) {
                    speedValue.textContent = "中等";
                } else {
                    speedValue.textContent = "慢速";
                }
            }
            
            // 初始化游戏
            function initGame() {
                // 初始化蛇 (3节)
                snake = [
                    {x: 5, y: 10},
                    {x: 4, y: 10},
                    {x: 3, y: 10}
                ];
                
                // 生成食物
                generateFood();
                
                // 重置方向
                direction = 'right';
                nextDirection = 'right';
                
                // 重置分数
                score = 0;
                scoreDisplay.textContent = score;
                
                // 重置时间
                elapsedTime = 0;
                timeDisplay.textContent = '00:00';
                
                // 隐藏游戏结束画面
                gameOverScreen.style.display = 'none';
                
                // 更新速度显示
                updateSpeedDisplay();
            }
            
            // 生成食物
            function generateFood() {
                const maxX = Math.floor(canvas.width / gridSize) - 1;
                const maxY = Math.floor(canvas.height / gridSize) - 1;
                
                // 确保食物不会出现在蛇身上
                let newFood;
                let onSnake;
                
                do {
                    onSnake = false;
                    newFood = {
                        x: Math.floor(Math.random() * maxX),
                        y: Math.floor(Math.random() * maxY)
                    };
                    
                    // 检查是否在蛇身上
                    for (let segment of snake) {
                        if (segment.x === newFood.x && segment.y === newFood.y) {
                            onSnake = true;
                            break;
                        }
                    }
                } while (onSnake);
                
                food = newFood;
            }
            
            // 绘制游戏
            function draw() {
                // 清空画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制背景网格
                drawBackground();
                
                // 绘制食物 (草莓)
                drawFood();
                
                // 绘制蛇
                drawSnake();
            }
            
            // 绘制背景网格
            function drawBackground() {
                ctx.fillStyle = '#f8f9fa';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // 绘制网格线
                ctx.strokeStyle = '#e9ecef';
                ctx.lineWidth = 0.5;
                
                for (let x = 0; x < canvas.width; x += gridSize) {
                    ctx.beginPath();
                    ctx.moveTo(x, 0);
                    ctx.lineTo(x, canvas.height);
                    ctx.stroke();
                }
                
                for (let y = 0; y < canvas.height; y += gridSize) {
                    ctx.beginPath();
                    ctx.moveTo(0, y);
                    ctx.lineTo(canvas.width, y);
                    ctx.stroke();
                }
            }
            
            // 绘制食物 (草莓)
            function drawFood() {
                const centerX = food.x * gridSize + gridSize / 2;
                const centerY = food.y * gridSize + gridSize / 2;
                const radius = gridSize / 2 - 2;
                
                // 草莓主体
                ctx.fillStyle = '#ff6b6b';
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
                ctx.fill();
                
                // 草莓叶子
                ctx.fillStyle = '#69db7c';
                ctx.beginPath();
                ctx.moveTo(centerX - radius/2, centerY - radius/1.5);
                ctx.lineTo(centerX, centerY - radius);
                ctx.lineTo(centerX + radius/2, centerY - radius/1.5);
                ctx.fill();
                
                // 草莓种子
                ctx.fillStyle = '#ffd8a8';
                const seedCount = 8;
                for (let i = 0; i < seedCount; i++) {
                    const angle = (i / seedCount) * Math.PI * 2;
                    const seedX = centerX + Math.cos(angle) * radius/1.8;
                    const seedY = centerY + Math.sin(angle) * radius/1.8;
                    ctx.beginPath();
                    ctx.arc(seedX, seedY, 2, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
            
            // 绘制蛇
            function drawSnake() {
                // 绘制蛇身
                for (let i = 0; i < snake.length; i++) {
                    const segment = snake[i];
                    const centerX = segment.x * gridSize + gridSize / 2;
                    const centerY = segment.y * gridSize + gridSize / 2;
                    const radius = gridSize / 2 - 1;
                    
                    // 蛇身颜色渐变
                    const colorValue = Math.max(150, 255 - i * 5);
                    ctx.fillStyle = `rgb(152, ${colorValue}, 255)`;
                    
                    ctx.beginPath();
                    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
                    ctx.fill();
                    
                    // 蛇身描边
                    ctx.strokeStyle = '#7743db';
                    ctx.lineWidth = 1.5;
                    ctx.stroke();
                    
                    // 绘制蛇头 (带眼睛)
                    if (i === 0) {
                        // 蛇头高光
                        ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
                        ctx.beginPath();
                        ctx.arc(centerX - radius/3, centerY - radius/3, radius/4, 0, Math.PI * 2);
                        ctx.fill();
                        
                        // 眼睛
                        ctx.fillStyle = '#333';
                        ctx.beginPath();
                        
                        // 根据方向确定眼睛位置
                        let eyeOffsetX = 0;
                        let eyeOffsetY = 0;
                        
                        switch(direction) {
                            case 'up':
                                eyeOffsetY = -radius/3;
                                break;
                            case 'down':
                                eyeOffsetY = radius/3;
                                break;
                            case 'left':
                                eyeOffsetX = -radius/3;
                                break;
                            case 'right':
                                eyeOffsetX = radius/3;
                                break;
                        }
                        
                        // 左眼
                        ctx.arc(centerX - radius/3 + eyeOffsetX, centerY - radius/3 + eyeOffsetY, radius/6, 0, Math.PI * 2);
                        ctx.fill();
                        
                        // 右眼
                        ctx.beginPath();
                        ctx.arc(centerX + radius/3 + eyeOffsetX, centerY - radius/3 + eyeOffsetY, radius/6, 0, Math.PI * 2);
                        ctx.fill();
                    }
                }
            }
            
            // 游戏更新逻辑
            function update() {
                // 更新方向
                direction = nextDirection;
                
                // 计算蛇头新位置
                const head = {...snake[0]};
                
                switch(direction) {
                    case 'up':
                        head.y -= 1;
                        break;
                    case 'down':
                        head.y += 1;
                        break;
                    case 'left':
                        head.x -= 1;
                        break;
                    case 'right':
                        head.x += 1;
                        break;
                }
                
                // 检查游戏结束条件
                if (checkCollision(head)) {
                    endGame();
                    return;
                }
                
                // 将新头部添加到蛇
                snake.unshift(head);
                
                // 检查是否吃到食物
                if (head.x === food.x && head.y === food.y) {
                    // 增加分数
                    score += 10;
                    scoreDisplay.textContent = score;
                    
                    // 生成新食物
                    generateFood();
                    
                    // 稍微加快游戏速度（最多到150ms）
                    if (gameSpeed > 150) {
                        gameSpeed -= 2;
                        restartGameLoop();
                    }
                } else {
                    // 如果没吃到食物，移除尾部
                    snake.pop();
                }
            }
            
            // 检查碰撞
            function checkCollision(head) {
                // 检查墙壁碰撞
                if (
                    head.x < 0 || 
                    head.y < 0 || 
                    head.x >= canvas.width / gridSize || 
                    head.y >= canvas.height / gridSize
                ) {
                    return true;
                }
                
                // 检查自身碰撞 (跳过头部)
                for (let i = 1; i < snake.length; i++) {
                    if (head.x === snake[i].x && head.y === snake[i].y) {
                        return true;
                    }
                }
                
                return false;
            }
            
            // 更新游戏时间
            function updateTime() {
                if (!gameRunning) return;
                
                elapsedTime = Math.floor((Date.now() - startTime) / 1000);
                const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0');
                const seconds = (elapsedTime % 60).toString().padStart(2, '0');
                timeDisplay.textContent = `${minutes}:${seconds}`;
            }
            
            // 重新开始游戏循环
            function restartGameLoop() {
                if (gameRunning) {
                    clearInterval(gameInterval);
                    gameInterval = setInterval(gameLoop, gameSpeed);
                }
            }
            
            // 游戏循环
            function gameLoop() {
                update();
                draw();
                updateTime();
            }
            
            // 开始游戏
            function startGame() {
                if (gameRunning) return;
                
                gameRunning = true;
                startTime = Date.now() - elapsedTime * 1000;
                
                gameInterval = setInterval(gameLoop, gameSpeed);
            }
            
            // 结束游戏
            function endGame() {
                gameRunning = false;
                clearInterval(gameInterval);
                
                // 显示最终分数和时间
                finalScore.textContent = `最终分数: ${score}`;
                finalTime.textContent = `游戏时间: ${timeDisplay.textContent}`;
                
                // 显示游戏结束画面
                gameOverScreen.style.display = 'block';
            }
            
            // 重新开始游戏
            function restartGame() {
                clearInterval(gameInterval);
                initGame();
                draw();
                gameRunning = false;
                welcomeScreen.style.display = 'none';
                gameOverScreen.style.display = 'none';
            }
            
            // 事件监听
            document.addEventListener('keydown', (e) => {
                if (!gameRunning) return;
                
                switch(e.key) {
                    case 'ArrowUp':
                        if (direction !== 'down') nextDirection = 'up';
                        break;
                    case 'ArrowDown':
                        if (direction !== 'up') nextDirection = 'down';
                        break;
                    case 'ArrowLeft':
                        if (direction !== 'right') nextDirection = 'left';
                        break;
                    case 'ArrowRight':
                        if (direction !== 'left') nextDirection = 'right';
                        break;
                }
            });
            
            // 方向按钮事件
            document.querySelector('.up-btn').addEventListener('click', () => {
                if (gameRunning && direction !== 'down') nextDirection = 'up';
            });
            
            document.querySelector('.down-btn').addEventListener('click', () => {
                if (gameRunning && direction !== 'up') nextDirection = 'down';
            });
            
            document.querySelector('.left-btn').addEventListener('click', () => {
                if (gameRunning && direction !== 'right') nextDirection = 'left';
            });
            
            document.querySelector('.right-btn').addEventListener('click', () => {
                if (gameRunning && direction !== 'left') nextDirection = 'right';
            });
            
            // 游戏速度滑块事件
            speedSlider.addEventListener('input', () => {
                gameSpeed = parseInt(speedSlider.value);
                updateSpeedDisplay();
                
                if (gameRunning) {
                    restartGameLoop();
                }
            });
            
            // 按钮事件
            startBtn.addEventListener('click', () => {
                startGame();
                welcomeScreen.style.display = 'none';
            });
            
            resetBtn.addEventListener('click', restartGame);
            restartBtn.addEventListener('click', restartGame);
            playBtn.addEventListener('click', () => {
                startGame();
                welcomeScreen.style.display = 'none';
            });
            
            // 初始化
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();
            initGame();
            draw();
        });
    </script>
</body>
</html>